{include file="../application/admin/view/header.html"}
</head>
<body>
<div class="container">
	<div class="col-sm-offset-5 col-md-4" data-warehouseId="{$warehouse_list.id}">
		<h3>{$warehouse_list.warehouse}</h2>
	</div>

	<div>
		<div id="warehouse_stat" style="height:900px;"></div>
	</div>
	

</div>
{include file="../application/admin/view/footer.html"}
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript">
	var logins_data = {$logins_data};

	var warehouse_chart = echarts.init(document.getElementById('warehouse_stat'));
	var app = {};

	function getData(year,loginData){
		year = year || '2018';
		var start =+ echarts.number.parseDate(year + '-01-01');
		var end =+ echarts.number.parseDate((+year+1) + '-01-01'); 
		var dayTime = 3600 * 24 * 1000;
		var data = [];
		for(var time = start;time < end;time += dayTime){
			var _in = false;
			for(key in loginData){
				var login_date = +echarts.number.parseDate(key);
				if (login_date == time ) {
					data.push([key,loginData[key]]);
					// console.log(key);
					_in = true;
					break;
				}
			}
			if (_in == false) {
				data.push([
					echarts.format.formatTime('yyyy-MM-dd', time),
					0
				]);
			}
			
		}
		return data;
	}



option = {
    tooltip: {
        position: 'top'
    },
    visualMap: {
        min: 0,
        max: 100,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        top: 'top'
    },

    calendar: [
    // {
    //     range: '2020',
    //     cellSize: ['auto', 20]
    // },
    {
        // top: 260,
        range: '2019',
        cellSize: ['auto', 20]
    },
    {
        top: 260,//450
        range: '2018',
        cellSize: ['auto', 20],
        right: 5
    }
    ],

    series: [
    // {
    //     type: 'heatmap',
    //     coordinateSystem: 'calendar',
    //     calendarIndex: 0,
    //     data: getData(2020,logins_data)
    // },
     {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 0,
        data: getData(2019,logins_data),
        tooltip:{
            formatter: '{c}'
        }
    }, 
    {
        type: 'heatmap',
        coordinateSystem: 'calendar',
        calendarIndex: 1,
        data: getData(2018,logins_data),
        tooltip:{
            formatter: '{c}'
        }
    }
    ]

};
;
if (option && typeof option === "object") {
    warehouse_chart.setOption(option, true);
}

</script>
</footer>
</body>
</html>